<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        user-select: none;
      }
      .content {
        margin: 5px;
        display: inline-block;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
      }
      .btn {
        margin: 5px;
        display: inline-block;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
      }
      .active {
        text-decoration: line-through;
      }
      #app {
        position: relative;
      }
      .loading {
        position: absolute;
        width: 100vw;
        height: 100vh;
        font-size: 50px;
        left: 0;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #fff;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <div class="loading" v-show="isDialog">loading...</div>
      <h1>
        总选：
        <input
          type="checkbox"
          :checked="allChecked"
          @change="onAllChange"
          class="btn"
        />
      </h1>
      <h1>总价：{{totalPrice}}</h1>
      <ul>
        <li v-for="(item, index) in list">
          <span class="btn">
            <input
              type="checkbox"
              :checked="item.check"
              @change="onItemChange(item)"
            />
          </span>
          <span class="content" :class="item.check ? 'active' : '' ">
            {{item.value}}
          </span>
          <span class="btn" @click="addItem(item)">+</span>
          <span class="btn">{{item.count}}</span>
          <span class="btn" @click="removeItem(item)">-</span>
        </li>
      </ul>
      <hr />
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/mockjs/dist/mock.js"></script>
    <script>
      const data = Mock.mock({
        'list|10': [
          {
            id: '@id',
            value: '@city(true)',
            count: 1,
            check: false,
            price: '@integer(1,100)',
          },
        ],
      })

      const createData = () => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(data.list)
          }, 2000)
        })
      }

      const app = new Vue({
        el: '#app',
        // 可以是对象也可以是函数，以后都是函数
        data: {
          list: [],
          allChecked: false,
          isDialog: false,
        },
        created() {
          this.getData()
        },
        mounted() {},
        methods: {
          async getData() {
            this.isDialog = true
            const res = await createData()
            this.isDialog = false
            this.list = res
          },
          // 总选事件
          onAllChange() {
            this.allChecked = !this.allChecked
            this.list.forEach((item) => {
              item.check = this.allChecked
            })
          },
          // 单选事件
          onItemChange(item) {
            item.check = !item.check
            // 全为真 才总选选中，一个为假，就不选中
            this.allChecked = this.list.every((item) => {
              return item.check
            })
          },
          // ++
          addItem(item) {
            item.count++
          },
          // --
          removeItem(item) {
            if (item.count <= 1) {
              if (window.confirm('确定删除吗?')) {
                const removeIndex = this.list.findIndex((v) => v.id === item.id)
                this.list.splice(removeIndex, 1)
              }
              return
            }
            item.count--
          },
        },
        watch: {},
        computed: {
          totalPrice() {
            // let str = 0
            // this.list.forEach((item) => {
            //   str += item.price * item.count
            // })
            // return str
            return this.list.reduce((num, item) => {
              return num + item.count * item.price
            }, 0)
          },
        },
      })
    </script>
  </body>
</html>
